body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: pink;
}

.windmill {
    position: relative;
    width: 200px;
    height: 400px;
}

.fan {
    position: relative;
    width: 200px;
    height: 200px;
    animation: rotate 4s linear infinite;
}

.fan:hover {
    animation: rotate 1s linear infinite;
}

.stick {
    position: absolute;
    bottom: 0;
    left: 92px;
    z-index: -1;
    width: 16px;
    height: 300px;
    background: #b67e4f;
    border-radius: 16px;
}

.dot {
    position: absolute;
    top: 90px;
    left: 90px;
    width: 20px;
    height: 20px;
    background-color: #515151;
    border-radius: 50%;
}

.top {
    position: absolute;
    top: 0;
    left: 0;
    border-top: 50px solid transparent;
    border-right: 50px solid #f4d458;
    border-bottom: 50px solid #f6ef9b;
    border-left: 50px solid #f6ef9b;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    border-top: 50px solid #f28b1c;
    border-right: 50px solid transparent;
    border-bottom: 50px solid #e63e3b;
    border-left: 50px solid #f28b1c;
}

.bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    border-top: 50px solid #8cb3df;
    border-right: 50px solid #8cb3df;
    border-bottom: 50px solid transparent;
    border-left: 50px solid #3874b9;
}

.left {
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 50px solid #32b273;
    border-right: 50px solid #c3d864;
    border-bottom: 50px solid #c3d864;
    border-left: 50px solid transparent;
}


@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}